<template>
  <div class="orderconfirm">
    <van-nav-bar title="订单确认" left-arrow @click-left="$router.back()" />
    <div class="shops">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <div slot="title">
            <div class="address-content">
              <van-icon name="location-o" />
              <p class="other-info">
                <span>{{addressname}}</span>
                <span style="margin-left:10px">{{telp}}</span>
              </p>
              <div class="address-info">
                <div class="address-info-con">
                  <p>{{address}}</p>
                </div>
              </div>
            </div>
          </div>
          <van-address-list
            v-model="chosenAddressId"
            :list="list"
            @select="onselect"
            @edit="onEdit"
          />
        </van-collapse-item>
      </van-collapse>
      <van-cell-group>
        <van-cell>
          <div slot="default" :border="false" class="sname">
            <van-image
              v-for="item in orderslist"
              :key="item.id"
              width="100"
              height="100"
              :src="item"
            />
            <div class="sname_div">{{sname[id-1]}}</div>
          </div>
          <div class="sumorder" slot="right-icon">X{{step}}</div>
        </van-cell>
        <van-cell title="商品总额" :value="'￥'+shopprice" />
        <van-cell title="使用优惠券" value="暂无可用券>>>" />
      </van-cell-group>
      <van-cell-group class="vancell">
        <van-collapse v-model="paymethods">
          <van-collapse-item :title="tile" :name="paymethod.id">
            <div v-for="(item,index) in paymethod" :key="item.id">
              <van-radio-group v-model="radio">
                <van-radio :name="item.id" @click="toggle(index)">
                  <img :src="item.img" />
                  <span class="zfm">{{item.zfm}}</span>
                  <span class="payway-tips-text">{{item.pay_text}}</span>
                </van-radio>
              </van-radio-group>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-cell-group>
      <van-submit-bar :price="shopprice*100" button-text="提交订单" @submit="onorders" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      paymethod: [
        {
          id: 1,
          img: "https://s.juancdn.com/jpwebapp/images/shopping/icon_wx.png",
          zfm: "微信支付",
          pay_text: "(仅支持微信6.0.2及以上版本)"
        },
        {
          id: 2,
          img: "https://s.juancdn.com/jpwebapp/images/shopping/icon_ali.png",
          zfm: "支付宝支付",
          pay_text: "推荐"
        }
      ],
      paymethods: [],
      orderslist: [],
      activeNames: [],
      list: [],
      chosenAddressId: "",
      shopprice: "",
      sname: [],
      tile: "支付方式",
      radio: [],
      addressname: "",
      telp: "",
      address: "",
      step: localStorage.getItem("shopcartsteppr"),
      id: localStorage.getItem("orderid")
    };
  },
  computed: {},
  created() {
    let id = localStorage.getItem("orderid");
    console.log(id);

    //订单渲染
    this.$http.get("/order_confirm", { params: { id: id } }).then(res => {
      // console.log(res);
      if (res.data.code === 201) {
        // this.orderslist = res.data.data;
        this.orderlist += "";
        let sum = 0;
        res.data.data.forEach(v => {
          this.orderslist.push(v.shop_image);
          this.sname.push(v.shop_name);
          sum += this.step * v.shop_price;
        });
        this.shopprice = sum;
      }
    });
    // console.log(this.shopCount);
    this.getaddress();
    // console.log(this.paymethod);
  },
  methods: {
    getaddress() {
      // 地址
      this.$http.get("/address_index").then(res => {
        // console.log(res);
        // res.data.data+=''
        // this.addressname=res.data.data.name
        res.data.data.forEach(v => {
          this.list.push({
            id: v.id,
            name: v.name,
            tel: v.tel,
            address: v.province + v.city + v.county + v.addressDetail
          });
          // this.list.name+=''
          if (v.isDefault === 1) {
            this.chosenAddressId = v.id;
            this.addressname = this.list[this.chosenAddressId - 1].name;
            this.telp = this.list[this.chosenAddressId - 1].tel;
            this.address = this.list[this.chosenAddressId - 1].address;
            this.getaddress();
          }
        });
        // console.log(this.list);
      });
    },
    onselect(item) {
      // console.log(item.id,index)
      let data = {
        id: item.id,
        meta: 1234
      };
      this.$http.post("/address_add", data).then(res => {
        // console.log(res.data);
      });
    },
    onEdit(item) {
      // console.log(item.id)
      this.$router.push({ path: "/address_edit", query: { id: item.id } });
    },
    toggle(checked) {
      let paymethod = localStorage.getItem("paymethod");
      if (paymethod !== null) {
        localStorage.removeItem("paymethod");
      }
      // console.log(this.radio);
      // console.log(this.paymethods);
      if (checked === 0 || checked === 1) {
        localStorage.setItem(
          "paymethod",
          JSON.stringify(this.paymethod[checked])
        );
        return false;
      }
    },
    onorders() {
      let paymethod = localStorage.getItem("paymethod");
      console.log(paymethod);
      if (paymethod === null) {
        // localStorage.removeItem("paymethod");
        return this.$toast("请选择支付方式");
      } else {
        this.$router.push("/me");
      }
    }
  }
};
</script>
<style lang="less">
.orderconfirm {
  background: #f4f4f8;
  .shops {
    .van-collapse {
      color: #fff;
      background-color: #48505a;
      .address-content {
        height: 80px;
        position: relative;
        color: #fff;
        background-color: #48505a;
        .van-icon {
          position: relative;
          top: 25px;
          left: 20px;
          height: 45px;
          width: 35px;
          font-size: 30px;
        }
        .other-info {
          padding-left: 60px;
          position: absolute;
          top: 0px;
        }
        .address-info {
          margin-top: -25px;
          position: absolute;
          .address-info-con {
            padding-left: 60px;
          }
        }
      }
    }
    .sumorder {
      position: absolute;
      bottom: 0px;
      right: 10px;
      font-size: 12px;
      color: #969799;
    }
    .sname {
      overflow: hidden;
      .van-image {
        float: left;
      }
      .sname_div {
        float: left;
        width: 67%;
        margin-left: 10px;
      }
    }
    .vancell {
      margin-top: 10px;
      img {
        width: 24px;
        height: 24px;
        margin: 0px 16px 0px 0px;
      }
      .zfm {
        font-size: 12px;
        position: relative;
        top: -6px;
      }
      .payway-tips-text {
        font-size: 8px;
        position: relative;
        top: -6px;
        color: #bbb;
      }
    }
    .van-address-list__add {
      // position: fixed;
      // top: 100px;
      // background: rosybrown;
      // border: none;
      // left: 35%;
      // width: 30%;
      display: none;
    }
  }
}
</style>